<div class="main-container">
    <div class="top-bar">
        <div class="top-info-box">
            <ul>
                <li *ngFor="let item of generalInfoList">
                    <div class="prefix">
                        <div class="point"></div>
                        <div class="line"></div>
                    </div>
                    <div>
                        <p class="title">{{ item.name }}</p>
                        <p>
                            <span class="num">{{ item.num }}</span>
                            <span class="unit">{{ item.unit }}</span>
                        </p>
                    </div>
                </li>
            </ul>
            <div class="select-wrap" *ngIf="userSectionId === '1'">
                <nz-radio-group [(ngModel)]="radioValue" (ngModelChange)="queryInfo(radioValue)">
                    <label nz-radio-button nzValue="1">全处</label>
                    <label nz-radio-button nzValue="168">一所</label>
                    <label nz-radio-button nzValue="169">二所</label>
                </nz-radio-group>
            </div>
        </div>
        <div class="right-btn">
            <button nz-button nzType="primary" (click)="directToList()">切换至列表页</button>
        </div>
    </div>
    <div class="main-wrap" [ngClass]="'main-wrap-' + queryParamStationId">
        <div class="center-box">
            <div [ngClass]="'flow-line-' + queryParamStationId"></div>
<!--            <div class="sub-box duanmian-box" *ngFor="let item of sectionList1"-->
<!--                 [ngStyle]="{'top': item.top + 'vh', 'left': item.left + 'vw'}">-->
<!--                <div class="info-box">-->
<!--                    <p class="title">{{ item.title }}</p>-->
<!--                    <div class="middle-box">-->
<!--                        <p>目前水位：<span>{{ item.level }}m</span></p>-->
<!--                        <nz-progress [nzPercent]="item.percentage" nzSize="small" [nzShowInfo]="false"></nz-progress>-->
<!--                    </div>-->
<!--                    <nz-divider class="custom-divider"></nz-divider>-->
<!--                    <p class="warning-level">瞬时流量： <span>{{ item.flow }}m³/s</span></p>-->
<!--                </div>-->
<!--            </div>-->

            <div class="sub-box duanmian-box" *ngFor="let item of sectionList"
                 [ngStyle]="{'top': item.top + 'vh', 'left': item.left + 'vw'}">
                <div class="line duanmian-line" [ngStyle]="{'height': item.lineHeight + 'vh'}"></div>
                <div class="icon duanmian-icon" [ngStyle]="{'top': item.iconTop + 'vh'}"></div>
                <div class="info-box">
                    <p class="title">{{ item.title }}</p>
                    <div class="middle-box">
                        <p>目前水位：<span>--m</span></p>
<!--                        <p>目前水位：<span>{{ item.level }}m</span></p>-->
                        <nz-progress [nzPercent]="item.percentage" nzSize="small" [nzShowInfo]="false"></nz-progress>
                    </div>
                    <nz-divider class="custom-divider"></nz-divider>
<!--                    <p class="warning-level">瞬时流量： <span>{{ item.flow }}m³/s</span></p>-->
                    <p class="warning-level">瞬时流量： <span>--m³/s</span></p>
                </div>
            </div>
            <div class="sub-box gate-box jiezhi-box" *ngFor="let item of controlList"
                 [ngStyle]="{'top': item.top + 'vh', 'left': item.left + 'vw'}">
                <div class="line jiezhizha-line" [ngStyle]="{'height': item.lineHeight + 'vh'}"></div>
                <div class="icon jiezhizha-icon" [ngStyle]="{'top': item.iconTop + 'vh'}"></div>
                <div class="info-box" (click)="openJieZhiDetailModal(item)">
                    <p class="title">{{ item.title }}</p>
                    <p class="top">开度(m)</p>
                    <div class="middle-box">
                        <ng-container *ngIf="item.openInfo.length < 4">
                            <div class="inline-box" *ngFor="let info of item.openInfo;let i = index">
                                <span>{{info.val | number: '1.2-2'}}</span>
                                <nz-progress [nzPercent]="info.val/1.5 * 100" [nzStrokeColor]="colorOptions[i]"
                                             nzSize="small" [nzShowInfo]="false"></nz-progress>
                            </div>
                        </ng-container>
                        <ng-container *ngIf="item.openInfo.length > 3">
                            <div style="display: flex;flex-wrap: wrap">
                                <div class="inline-box" style="width: 50%"
                                     *ngFor="let info of item.openInfo;let i = index">
                                    <span>{{info.val | number: '1.2-2'}}</span>
                                    <nz-progress [nzPercent]="info.val/1.5 * 100" [nzStrokeColor]="colorOptions[i]"
                                                 nzSize="small" [nzShowInfo]="false"></nz-progress>
                                </div>
                            </div>
                        </ng-container>
                    </div>
                    <nz-divider class="custom-divider"></nz-divider>
                    <p class="warning-level">水位： <span>{{ item.title !== '太阳梁节制闸' ? item.warningLevel : '--'}}m</span></p>
                </div>
            </div>
            <div class="sub-box gate-box tuishui-box" *ngFor="let item of tuishuiList"
                 [ngStyle]="{'top': item.top + 'vh', 'left': item.left + 'vw'}">
                <div class="line tuishui-line" [ngStyle]="{'height': item.lineHeight + 'vh', 'left': item.iconLeft + 17 + 'px'}"></div>
                <div class="icon tuishui-icon" [ngStyle]="{'top': item.iconTop + 'vh', 'left': item.iconLeft + 'px'}"></div>
                <div class="info-box" (click)="openJieZhiDetailModal(item)">
                    <p class="title">{{ item.title }}</p>
                    <p class="top">开度(m)</p>
                    <div class="middle-box">
                        <ng-container *ngIf="item.openInfo.length < 4">
                            <div class="inline-box" *ngFor="let info of item.openInfo;let i = index">
                                <span>{{info.val | number: '1.2-2'}}</span>
                                <nz-progress [nzPercent]="info.val/1.5 * 100" [nzStrokeColor]="colorOptions1[i]"
                                             nzSize="small" [nzShowInfo]="false"></nz-progress>
                            </div>
                        </ng-container>
                        <ng-container *ngIf="item.openInfo.length > 3">
                            <div style="display: flex;flex-wrap: wrap">
                                <div class="inline-box" style="width: 50%"
                                     *ngFor="let info of item.openInfo;let i = index">
                                    <span>{{info.val | number: '1.2-2'}}</span>
                                    <nz-progress [nzPercent]="info.val/1.5 * 100" [nzStrokeColor]="colorOptions1[i]"
                                                 nzSize="small" [nzShowInfo]="false"></nz-progress>
                                </div>
                            </div>

                        </ng-container>
                    </div>
                    <nz-divider class="custom-divider"></nz-divider>
                    <p class="warning-level">水位： <span>{{ item.warningLevel }}m</span></p>
                </div>
            </div>
            <div class="high-light-section-box">
                <div class="section-wrap"
                     *ngFor="let section of sectionPosList"
                     (click)="sectionOnActivated(section)"
                     [ngStyle]="{'width': section.width + 'vw', 'left': section.left + 'vw', 'top': section.top + 'vh'}"
                     [ngClass]="{'active': section.name === activatedSectionName}">
                    <div class="section-img">
                        <img [src]="'./assets/images/gate/section_' + section.sort + '.png'" [alt]="section.name">
                    </div>
                    <div class="connect-line"
                         [ngStyle]="{'height': (66 - section.top - section.lineTop) + 'vh', 'left': section.width / 2 + 'vw', 'top': section.lineTop + 'vh'}">

                    </div>
                </div>

            </div>
        </div>

        <div class="bottom-box">
            <div class="bottom-main-box">
                <div class="sub-bottom-box" *ngFor="let item of gateList">
                    <!--<div class="info-box"-->
                    <!--[ngClass]="{'open': item.runstatus === '上行', 'close': item.runstatus === '下行', 'stop': item.runstatus === '停止'}"-->
                    <!--(click)="openGateDetailModal(item)">-->
                    <div class="info-box"
                         [ngClass]="{'open': item.onlinestatus === 'on', 'close': item.onlinestatus === 'off', 'stop': !item.onlinestatus}"
                         (click)="openGateDetailModal(item)">
                        <p class="box-title">
                            <span class="title-icon"></span>
                            {{ item.watergateCode }}
                        </p>
                        <div class="box-content">
                            <div class="prefix">
                                <!--<div class="point"></div>-->
                                <!--<div class="line"></div>-->
                                <nz-progress [nzPercent]="item.degreeRate"
                                             [nzStrokeColor]="{ '0%': '#499af9', '100%': '#499af9' }" nzSize="small"
                                             [nzShowInfo]="false"></nz-progress>
                            </div>
                            <div class="content">
                                <!--<p>-->
                                <!--<span class="label">累计：</span>-->
                                <!--<span class="value">{{ item.totalFlux }}m³</span>-->
                                <!--</p>-->
                                <p>
                                    <span class="label">流量：</span>
                                    <span class="value">{{ item.flux }}m³/s</span>
                                </p>
                                <!--<p>-->
                                <!--<span class="label">闸前水位：</span>-->
                                <!--<span class="value">{{ item.beforewaterlevel }}m</span>-->
                                <!--</p>-->
                                <!--<p>-->
                                <!--<span class="label">闸后水位：</span>-->
                                <!--<span class="value">{{ item.afterwaterlevel }}m</span>-->
                                <!--</p>-->
                                <p>
                                    <span class="label">开度：</span>
                                    <span class="value">{{ item.degree }}mm</span>
                                </p>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>
</div>
